<template>
	<div class="app-container">
		<div class="bgWhite radius8">
			<el-form class="p20 flex col-top row-between" style="padding-bottom: 0;" label-width="100px"
				:model="queryParams" ref="queryForm" :inline="true">
				<div>					
					<el-form-item label="目标类型" prop="targetType">
						<el-select v-model="queryParams.targetType" placeholder="请选择" size="large"
							style="width: 200px">
							<el-option v-for="dict in bs_performance_targettype" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="日期选择" prop="financialYear">
						<el-date-picker
						  size="large"
						  v-model="queryParams.financialYear"
						  value-format="YYYY"
						  type="year"
						  placeholder="请选择日期">
						</el-date-picker>
					</el-form-item>
				</div>
				<el-form-item style="margin-right: 0">
					<div class="flex col-center row-end">
						<el-button class="searchBtn" type="defaultBtn" @click="handleQuery">查询</el-button>
						<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="bgWhite radius8 p20 mt25">
			<div class="flex col-center row-between mb20">
				<div>
					<span class="fb fs16">个人目标列表</span>
					<div class="fs14 color-red mt10">成交金额成员目标总计：{{totalPrice}}</div>
				</div>
				<div>
					<el-button :disabled="multiple" type="operate" @click="editBatch()"
					v-hasPermi="['performance:editBatch']"
					>批量编辑</el-button>
					<el-button type="defaultBtn" @click="handleAdd" v-hasPermi="['performance:add']">
						添加目标
					</el-button>
				</div>
			</div>
			<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
					background: '#FAFAFA',
					color: '#0C1019',
					height: '54px',
				  }" :cell-style="{ height: '54px' }"
				   @selection-change="handleSelectionChange"
				  >
				<el-table-column type="selection" width="55" align="center" />  
				<el-table-column label="姓名" align="center" prop="userName" width="150">
					<template #default="scope">
						<span class="main-color">{{scope.row.userName}}</span>
					</template>
				</el-table-column>
				<el-table-column label="所属部门" align="center" prop="deptName" width="150"/>
				<el-table-column label="目标财年" align="center" prop="financialYear" width="150">
					<template v-slot="scope">
						{{scope.row.financialYear}}
					</template>
				</el-table-column>
				<el-table-column label="目标类型" align="center" prop="targetType" width="150">
					<template v-slot="scope">
					  <dict-tag :options="bs_performance_targettype" :value="scope.row.targetType" />
					</template>
				</el-table-column>
				<el-table-column label="年度目标" align="center" prop="annualTarget" width="150">
					<template v-slot="scope">
						{{scope.row.annualTarget}}
					</template>
				</el-table-column>
				<el-table-column label="目标单位" align="center" prop="targetUnit" width="150">
					<template v-slot="scope">
					  <dict-tag :options="bs_performance_targetunit" :value="scope.row.targetUnit" />
					</template>
				</el-table-column>	
				<el-table-column label="第一季度" align="center" prop="quarterOne" width="150" />
				<el-table-column label="第二季度" align="center" prop="quarterTwo" width="150" />
				<el-table-column label="第三季度" align="center" prop="quarterThree" width="150" />
				<el-table-column label="第四季度" align="center" prop="quarterFour" width="150" />
				<el-table-column label="1月" align="center" prop="january" width="150" />
				<el-table-column label="2月" align="center" prop="february" width="150" />
				<el-table-column label="3月" align="center" prop="march" width="150" />
				<el-table-column label="4月" align="center" prop="april" width="150" />
				<el-table-column label="5月" align="center" prop="may" width="150" />
				<el-table-column label="6月" align="center" prop="june" width="150" />
				<el-table-column label="7月" align="center" prop="july" width="150" />
				<el-table-column label="8月" align="center" prop="august" width="150" />
				<el-table-column label="9月" align="center" prop="september" width="150" />
				<el-table-column label="10月" align="center" prop="october" width="150" />
				<el-table-column label="11月" align="center" prop="november" width="150" />
				<el-table-column label="12月" align="center" prop="december" width="150" />
				<el-table-column fixed="right" label="操作" align="center" width="100">
					<template v-slot="scope">
						<el-button size="mini" type="text" @click="handleUpdate(scope.row)"
							v-hasPermi="['performance:edit']">编辑</el-button>
						<el-button size="mini" type="text" @click="handleDelete(scope.row)"
							v-hasPermi="['performance:remove']">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
				v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>
		<targetDialog ref="dialogStatus" :detail="detail" :performanceType="'2'" 
		:ids="ids"
		:selectUserIds="selectUserIds" @getList="getList"></targetDialog>
	</div>
</template>

<script setup name="ProductSetup">
	import {
		personList,//列表
		performanceDetail ,//详情
		targetTotal,//总和
		delPerformance//删除
	} from "@/api/business/performance";
</script>
<script>
	import targetDialog from "./components/index.vue"
	export default {
		components:{
			targetDialog
		},
		data() {
			return {
				loading: true, // 遮罩层
				total: 0, // 总条数
				list: [], // 表格数据
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					performanceType:2,//(0=公司1=部门2=个人)
					targetType:'',
					financialYear:''
				}, //查询参数
				address:[],
				bs_performance_targettype:this.useDict('bs_performance_targettype').bs_performance_targettype,
				bs_performance_targetunit:this.useDict('bs_performance_targetunit').bs_performance_targetunit,
				ids:[],
				selectUserIds:[],//批量编辑回显
				saveUserIds:[],//子数据
				multiple:true,
				detail:'',//详情
				totalPrice:0
			}
		},
		created() {
			this.getList()
		},
		methods: {	
			//查询列表
			getList() {
				this.loading = true;
				personList(this.queryParams).then((response) => {
					this.list = response.rows;
					this.total = response.total;
					this.loading = false;
					this.getTargetTotal()
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 总和
			getTargetTotal(){
				targetTotal(this.queryParams).then(res=>{
					if(res.code == 200){
						this.totalPrice = res.data
					}
				})
			},
			//新增
			handleAdd() {
				this.detail = ''
				this.ids = []
				this.selectUserIds = []
				this.$refs.dialogStatus.open(0)
				this.$forceUpdate()
			},
			// 单条编辑
			handleUpdate(row) {
				this.detail = ''
				this.ids = []
				this.selectUserIds = []
				performanceDetail(row.id).then(res=>{
					if(res.code == 200){
						this.detail = res.data
						setTimeout(()=>{
							this.$refs.dialogStatus.open(1)
						},500)
					}
				})
			},
			//批量编辑
			editBatch(){
				this.detail = ''
				this.selectUserIds = this.saveUserIds
				this.$refs.dialogStatus.open(2)
				this.$forceUpdate()
			},
			handleDelete(row) {
				const ids = row.id || this.ids;
				let that = this
				this.$modal
					.confirm('是否确认删除编号为"' + ids + '"的数据项？')
					.then(function() {
						delPerformance(ids).then(res => {
							that.getList()
							this.$modal.msgSuccess("删除成功");
						})
					})
					.catch(() => {});
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id);
				this.saveUserIds = selection.map(item=>item.relatedId)
				this.selectUserIds = selection.map(item=>item.relatedId)
			  // single.value = selection.length != 1;
				this.multiple = !selection.length;
			},
		}
	}
</script>